<template>
  <div class="wrap">
    <template>
      <fill-header :step="4"/>
    </template>
    <div class="fill-wrap">
      <div class="fill-main flex flex-justify-around">
        <div class="fill-left">
          <div class="fill-content">
            <div class="title">
              <h2 class="blue">{{ $t('fillHeader.payInfo') }}</h2>
              <p class="font-16">{{ $t('payInfo.tips') }}</p>
            </div>
            <div class="border-bottom"/>
            <div class="progress">
              <div class="bar">
                <el-progress 
                  :percentage="75" 
                  :show-text="false" 
                  color="#8e71c7"/>
              </div>
              <span>75%</span>
            </div>
            <div class="contact">
              <div class="form">
                <el-form 
                  ref="form" 
                  :model="form" 
                  :rules="rules" 
                  label-position="top">
                  <div class="top">
                    <el-form-item 
                      :label="$t('payInfo.payWay')" 
                      prop="payoutType">
                      <el-radio-group v-model="form.payoutType">
                        <el-radio 
                          v-for="item in payWayOption" 
                          :label="item.optionValue" 
                          :key="item.optionValue">{{ item.optionName }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <div 
                      v-if="form.payoutType === '1'" 
                      class="nanglong">
                      <div class="title">
                        <img 
                          src="../../static/img/inPay.png" 
                          alt="" 
                          width="200" 
                          height="45">
                      </div>
                      <el-form-item 
                        v-if="form.payoutType === '1'" 
                        :label="$t('payInfo.yourNganLuongAccount')" 
                        prop="account">
                        <el-input 
                          v-model="form.account" 
                          :maxlength="50" 
                          type="text"/>
                      </el-form-item>
                      <el-form-item 
                        v-if="form.payoutType === '1'" 
                        :label="$t('payInfo.accountComfire')" 
                        prop="accountComfire">
                        <el-input 
                          v-model="form.accountComfire" 
                          :maxlength="50" 
                          type="text"/>
                      </el-form-item>
                      <a 
                        href="https://www.nganluong.vn/nganluong/userRegister/personal.html" 
                        class="font-14 blue" 
                        style="display:block;white-space:nowrap;">{{ $t('payInfo.hasNoneAccount') }}</a>
                    </div>
                    <div 
                      v-if="form.payoutType === '3'" 
                      class="bank">
                      <div class="title flex flex-align-center">
                        <img 
                          src="../../static/img/bank.png" 
                          alt="" 
                          height="30"><p 
                            class="bold" 
                            style="margin:0px 0px 0px 10px">{{ $t('payInfo.bankBinding') }}</p>
                      </div>
                      <el-form-item 
                        :label="$t('payInfo.choseBank')" 
                        prop="bankId">
                        <el-select v-model="form.bankId">
                          <el-option
                            v-for="item in bankList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                        </el-select>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('atm.no2')" 
                        prop="name">
                        <el-input 
                          v-model="form.name" 
                          type="text"/>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('payInfo.inputYourBank')" 
                        prop="bankAccount">
                        <el-input 
                          v-model="form.bankAccount" 
                          type="number"/>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('payInfo.bankAgain')" 
                        prop="bankAccountConfirm">
                        <el-input 
                          v-model="form.bankAccountConfirm" 
                          type="number"/>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('payInfo.email')" 
                        prop="email">
                        <el-input 
                          v-model="form.email" 
                          :maxlength="50" 
                          type="text"/>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('atm.no9')" 
                        prop="branchName">
                        <el-input 
                          v-model="form.branchName" 
                          :maxlength="50" 
                          type="text"/>
                      </el-form-item>
                      <el-form-item 
                        label=" " 
                        prop="is">
                        <el-checkbox v-model="form.is">{{ $t('atm.no7') }}</el-checkbox>
                      </el-form-item>
                    </div>
                    <div 
                      v-if="form.payoutType === '2'" 
                      class="bank">
                      <!-- <div class="title flex flex-align-center">
                        <img src="../static/img/bank.png" alt="" height="30"><p class="bold" style="margin:0px 0px 0px 10px">{{$t('payInfo.bankBinding')}}</p>
                      </div> -->
                      <el-form-item 
                        :label="$t('atm.no1')" 
                        prop="bankId">
                        <el-select 
                          v-model="form.bankId" 
                          :placeholder="$t('atm.no8')">
                          <el-option
                            v-for="item in bankList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                        </el-select>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('atm.no2')" 
                        prop="name">
                        <el-input 
                          v-model="form.name" 
                          type="text"/>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('atm.no3')" 
                        prop="bankAccount">
                        <el-input 
                          v-model="form.bankAccount" 
                          type="number"/>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('atm.no4')" 
                        prop="bankAccountConfirm">
                        <el-input 
                          v-model="form.bankAccountConfirm" 
                          :maxlength="50" 
                          type="number"/>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('atm.no5')" 
                        prop="accountConfirm">
                        <el-input 
                          v-model="form.accountConfirm" 
                          :maxlength="50" 
                          type="text"/>
                      </el-form-item>
                      <el-form-item 
                        :label="$t('atm.no6')" 
                        prop="date1">
                        <el-date-picker 
                          v-model="form.date1" 
                          type="date"
                          placeholder="选择日期" 
                          value-format="yyyy-MM-dd"
                        />
                      </el-form-item>
                      <el-form-item 
                        label=" " 
                        prop="is">
                        <el-checkbox v-model="form.is">{{ $t('atm.no7') }}</el-checkbox>
                      </el-form-item>
                    </div>
                    <div class="dashed-border"/>
                  </div>
                  <div class="bottom">
                    <div class="flex flex-align-center margin">
                      <img 
                        src="../../static/img/phone.png" 
                        alt="" 
                        width="24" 
                        height="40">
                      <span 
                        class="bold font-20" 
                        style="padding-left:16px;">{{ $t('payInfo.mobileVerify') }}</span>
                    </div>
                    <el-form-item 
                      :label="$t('payInfo.inputYourPhone')" 
                      prop="phone">
                      <el-input 
                        v-model="form.phone" 
                        type="tel" 
                        disabled/>
                    </el-form-item>
                    <el-form-item 
                      :label="$t('payInfo.inputVerifyCode')" 
                      prop="verifyCode">
                      <el-row :gutter="20">
                        <el-col :span="16">
                          <el-input 
                            v-model="form.verifyCode" 
                            type="number"/>
                        </el-col>
                        <el-col :span="8"><el-button 
                          :disabled="!form.phone?true:verifyBtn.enable?false:true" 
                          type="primary" 
                          class="primary white text-center" 
                          @click="send">{{ verifyBtn.text }}</el-button></el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item 
                      :label="$t('payInfo.inputPwd')" 
                      prop="password">
                      <span class="font-12 red">{{ $t('payInfo.pwdRules') }}</span>
                      <el-input 
                        v-model="form.password" 
                        type="password"/>
                    </el-form-item>
                    <div 
                      class="full-width flex flex-justify-center padding" 
                      style="margin-top: 30px;">
                      <el-button 
                        :disabled="!nextEnabled" 
                        type="primary" 
                        round 
                        @click="save">{{ $t('others.submit') }}</el-button>
                    </div>
                  </div>
                </el-form>
              </div>
              <el-dialog 
                :visible.sync="dialogTableVisible" 
                :close-on-click-modal="false" 
                :close-on-press-escape="false" 
                title="">
                <div class="flex dialog-wrap">
                  <div class="left white-bg">
                    <slider 
                      :title="$t('loanMoney.comfireLoanInfo')" 
                      :parent-amount="Number($store.state.amount)" 
                      :parent-period="Number($store.state.period)" 
                      @submit="submit()"/>
                  </div>
                  <div class="right blue-bg text-center">
                    <h2 class="bold white font-30">{{ $t('others.downloadAPP') }}</h2>
                    <img 
                      src="../../static/img/cscode.png" 
                      alt="">
                    <p class="font-24 white">{{ $t('others.downloadKnow') }}</p>
                    <img 
                      src="../../static/img/google.png" 
                      alt="">
                  </div>
                </div>
              </el-dialog>
            </div>
          </div>
        </div>
        <div class="fill-right">
          <fill-right/>
        </div>
      </div>
    </div>
    
    <template>
      <sjx_Footer/>
    </template>
  </div>
</template>
<script>
import fillHeader from '../../components/fill-header'
import slider from '../../components/slider'
import fillRight from '../../components/fill-right'
import sjx_Footer from '../../components/footer'
import base from '../../common/fn.js'
export default {
  components: {
    fillHeader,
    slider,
    sjx_Footer,
    fillRight
  },
  data() {
    return {
      dialogTableVisible: false,
      form: {
        payoutType: '1',
        account: '',
        accountComfire: '',
        emailConfirm: '',
        bankId: '',
        bankAccount: '',
        bankAccountConfirm: '',
        email: '',
        phone: '',
        verifyCode: '',
        password: '',
        date1: '',
        name: '',
        branchName: '',
        is: []
      },
      rules: {
        payoutType: [{ required: true, message: '', trigger: 'blur' }],
        bankId: [
          {
            required: true,
            message: this.$t('payInfo.choseBank'),
            trigger: 'blur'
          }
        ],
        bankAccount: [
          {
            required: true,
            message: this.$t('payInfo.inputYourBank'),
            trigger: 'blur'
          },
          {
            min: 4,
            max: 20,
            message: this.$t('payInfo.bankError'),
            trigger: 'blur'
          }
        ],
        bankAccountConfirm: [
          {
            required: true,
            message: this.$t('payInfo.inputYourBank'),
            trigger: 'blur'
          },
          {
            min: 4,
            max: 20,
            message: this.$t('payInfo.bankError'),
            trigger: 'blur'
          }
        ],
        account: [
          {
            required: true,
            message: this.$t('payInfo.emailError'),
            trigger: 'submit'
          },
          {
            validator: (rule, value, callback) => {
              let re = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
              if (!re.test(value)) {
                callback(new Error(this.$t('payInfo.emailError')))
              } else {
                callback()
              }
            },
            trigger: 'submit'
          }
        ],
        accountComfire: [
          {
            required: true,
            message: this.$t('payInfo.emailError'),
            trigger: 'submit'
          },
          {
            validator: (rule, value, callback) => {
              let re = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
              if (!re.test(value)) {
                callback(new Error(this.$t('payInfo.emailError')))
              } else {
                callback()
              }
            },
            trigger: 'submit'
          }
        ],
        email: [
          {
            required: true,
            message: this.$t('payInfo.emailError'),
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              let re = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
              if (!re.test(value)) {
                callback(new Error(this.$t('payInfo.emailError')))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        phone: [{ required: true, trigger: 'blur' }],
        name: [{ required: true, trigger: 'blur' }],
        is: [{ required: true, message: 'Yêu cầu', trigger: 'change' }],
        branchName: [{ required: true, message: 'Yêu cầu', trigger: 'change' }],
        verifyCode: [
          {
            required: true,
            message: this.$t('payInfo.emptyCode'),
            trigger: 'blur'
          }
        ],
        date1: [{ required: true, message: 'Yêu cầu', trigger: 'change' }],
        password: [
          {
            required: true,
            message: this.$t('payInfo.inputPwd'),
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              let rules = /^(?![A-Za-z]+$)(?!\d+$)(?![\W_]+$)\S{6,12}$/
              if (!rules.test(value)) {
                callback(new Error(this.$t('payInfo.pwdError')))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      payWayOption: [],
      bankList: [],
      nextEnabled: true,
      verifyBtn: {
        text: this.$t('payInfo.send'),
        enable: true
      },
      mytime: 60
    }
  },
  mounted() {
    const self = this
    self.form.phone = self.$store.state.phone
    this.fetchBank()
    if (self.$route.query.open == 'true') {
      self.dialogTableVisible = true
    }
    this.allData()
  },
  methods: {
    fetchBank() {
      let option = {
        header: {
          ...base,
          action: 'DICT0002'
        },
        optionGroup: 'bank'
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.optionName, value: item.optionValue })
          })
          this.bankList = arr
        }
      })
    },
    send() {
      const self = this
      if (!this.verifyBtn.enable) {
        return
      }
      let option = {
        header: {
          ...base,
          action: 'UPAYPC002'
        },
        phone: self.form.phone
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          this.countDown()
          // self.$message.success(res.header.msg)
        } else {
          self.$message.error(res.header.msg)
        }
      })
    },
    countDown() {
      const self = this
      self.timer = setInterval(() => {
        self.mytime -= 1
        if (self.mytime <= 0) {
          clearInterval(self.timer)
          self.verifyBtn.text = '重新发送'
          self.verifyBtn.enable = true
          return
        }
        self.verifyBtn.text = parseInt(self.mytime) + 's'
        self.verifyBtn.enable = false
      }, 1000)
    },
    save() {
      const self = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          let params = {}
          if (self.form.payoutType === '1') {
            params.payoutType = self.form.payoutType
            params.email = self.form.account
            params.emailConfirm = self.form.accountComfire
          } else if (self.form.payoutType === '3') {
            params.payoutType = '3'
            params.email = self.form.email
            params.emailConfirm = self.form.email
            params.bankId = self.form.bankId
            params.bankAccount = self.form.bankAccount
            params.bankAccountConfirm = self.form.bankAccountConfirm
            params.branchName = self.form.branchName
            params.cardFullname = self.form.name
          } else if (self.form.payoutType === '2') {
            params.payoutType = '2'
            params.email = self.form.accountConfirm
            params.emailConfirm = self.form.accountConfirm
            params.cardFullname = self.form.name
            params.bankId = self.form.bankId
            params.bankAccount = self.form.bankAccount
            params.bankAccountConfirm = self.form.bankAccountConfirm
            params.cardMonth = self.form.date1.slice(0, 4)
            params.cardYear = self.form.date1.slice(5, 7)
          }
          let option = {
            header: {
              ...base,
              action: 'U0017VN',
              sessionid: this.$store.state.sessionid
            },
            ...params
          }
          this.$axios.$post('', option).then(res => {
            if (
              (res.header.code == 0 && res.data == 1) ||
              res.header.code == -126
            ) {
              let jse = new JSEncrypt()
              jse.setPublicKey(this.$store.state.publicKey)
              let encrypted = jse.encrypt(self.form.password)
              let param2 = {}
              param2.valCode = self.form.verifyCode
              param2.password = encrypted
              let option = {
                header: {
                  ...base,
                  action: 'UPAYPC001',
                  sessionid: this.$store.state.sessionid
                },
                ...param2
              }
              this.$axios.$post('', option).then(res => {
                if (res.header.code == 0) {
                  self.nextEnabled = false
                  self.dialogTableVisible = true
                } else {
                  self.$message.error(res.header.msg)
                }
              })
            } else {
              self.$message.error(res.header.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    submit() {
      const self = this
      let params = {
        productId: this.$store.state.productId,
        wifiAddress: 0,
        orderLongitude: 0,
        orderLatitude: 0,
        orderAddress: 0,
        termType: 0,
        money: this.$store.state.trueAmount,
        days: this.$store.state.period
      }
      let option = {
        header: {
          ...base,
          action: 'O0002VN',
          sessionid: this.$store.state.sessionid
        },
        ...params
      }
      this.$axios.$post('', option).then(res => {
        this.dialogTableVisible = false
        if (res.header.code == 0) {
          self.$router.push('/')
        } else {
          self.$message.error(res.header.msg)
        }
      })
    },
    allData() {
      let option = {
        header: {
          ...base,
          action: 'DICT0001'
        }
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          this.payWayOption = res.data['payout.type']
        }
      })
    }
  }
}
</script>
<style>
.el-progress-bar__inner {
  background-color: #3462ff !important;
}
.el-progress-bar__outer {
  height: 9px !important;
}
.el-form--label-top .el-form-item__label {
  display: inline-block;
  text-align: left;
  padding: 0;
  width: 300px;
}
.el-select {
  width: 100%;
}
.el-button {
  background: #3462ff;
}
.el-button span {
  color: #fff !important;
  font-size: 16px;
}
.el-dialog__header {
  display: none;
}
.el-dialog__body {
  margin: 0;
  padding: 0;
  width: 1200px;
  height: 630px;
}
</style>

<style lang="scss" scoped>
#app {
  overflow: scroll !important;
}
.fill-wrap {
  background: #f7f7f7;
  padding: 20px;
  .fill-main {
    width: 1200px;
    margin: 0 auto;
    .fill-left {
      background: #fff;
      width: 800px;
      .fill-content {
        padding: 15px;
        .border-bottom {
          width: 500px;
        }
        .title {
          width: 100%;
          padding: 10px;
          h2 {
            font-size: 29px;
            font-weight: 700;
            line-height: 50px;
          }
          p {
            font-size: 16px;
            line-height: 30px;
            width: 720px;
            margin-bottom: 10px;
          }
        }
        .progress {
          width: 500px;
          position: relative;
          .bar {
            padding-top: 30px;
          }
          span {
            position: absolute;
            left: 70%;
            color: #3462ff;
          }
        }
        .contact {
          padding: 20px;
          .form {
            padding-bottom: 20px;
            width: 480px;
            .bottom {
              padding-top: 30px;
              .full-width {
                .el-button {
                  width: 140px;
                  height: 50px;
                  border-radius: 25px;
                  box-shadow: 2px 0px 13px rgba(48, 77, 220, 0.45);
                }
              }
            }
          }
        }
      }
    }
    .fill-right {
      background: #fff;
      width: 317px;
      height: 416px;
    }
    .line-height-38 {
      line-height: 38px;
    }
    input.primary {
      width: 470px;
      line-height: 20px;
      border: 1px solid #aaa;
      border-radius: 5px;
      margin: 10px 0;
      padding: 10px;
    }
    button.primary {
      width: 150px;
      height: 42px;
      border: none;
    }
    .dashed-border {
      width: 500px;
      margin-top: 30px;
      border-bottom: 1px dashed #ccc;
    }
    .dialog-wrap {
      height: 100%;
      .left {
        width: 853px;
        height: 100%;
      }
      .right {
        width: 347px;
        height: 100%;
        background: url(../../static/img/bg2.png);
        padding: 20px;
        h2 {
          line-height: 100px;
        }
        p {
          line-height: 38px;
          margin: 38px 0;
        }
      }
    }
  }
}
</style>
